Minification Safe Dependency Injection in AngularJS

When you minify JavaScript the JavaScript minifier replaces the names of local variables and parameters with shorter names. However, AngularJS uses the parameter names of controller functions, factories, services and providers to decide what to inject into their factory functions. If the names are changed, AngularJS cannot inject the correct objects.

To make your AngularJS code minification safe, you need to provide the names of the objects to inject as strings. You wrap these strings in an array together with the function that needs the values injected. Here is an AngularJS minification safe dependency injection example:

var myapp = angular.module("myapp", ['myservices']);

myapp.controller("AController", ['$scope', function(p1) {
    p1.myvar = "the value";
}]);

This example injects the $scope object into the p1 parameter of the controller function.

Notice how the controller function is registered. Instead of passing the controller function to the angular.controller function directly, an array is passed instead. This array contains the name of the value to inject into the controller function, as well as the controller function itself. The controller function is always the last value in this array. If you need to inject more than one value, the value names are listed in the beginning of the array and in the sequence they are to be injected into the function. Here is a minification safe multi value example:

var myapp = angular.module("myapp", ['myservices']);

myapp.controller("AController", ['$scope', '$http', function(p1, p2) {
    p1.myvar = "the value";
    p2.get("/myservice.json");
}]);

This example injects the $scope object into the p1 parameter, and the $http service into the p2 parameter of the controller function.

Now it no longer matters what the parameter names of the controller function are. AngularJS will use the strings in the beginning of the array to determine what to inject into the controller function.

The same mechanism can be used for factories, services and providers to provide minification safe dependency injection. Here is a minification safe factory, service and provider example:

var myutil = angular.module("myutil", []);


myutil.value("safeValue", "a safe value");


myutil.factory("safeFactory", ['safeValue', function(p1) {
    return { value : p1 };
}]);


function MySafeService(p1){
    this.doIt = function() {
        return "MySafeService.doIt() called: " + p1.value;
    }
}
myutil.service("safeService", ['safeFactory', MySafeService]);


myutil.provider("safeService2", function() {
    var provider = {};

    provider.$get = ['safeService', function(p1) {
        var service = {};

        service.doService = function() {
            console.log("safeService from provider: " + p1.doIt());
        }

        return service;
    }];

    return provider;
});

myapp.controller("AController", ['$scope', 'safeService2', function(p1, p2) {
    p1.myvar = "the value";
    p2.doService();
}]);

Notice especially the declaration of the provider. Notice how the dependencies are not specified on the provider factory function, but on the $get() function of the provider returned from inside the provider factory function. Actually, an array with names of dependencies and the function implementation is used instead of just a $get() function. Other than that, specifying dependencies works the same for providers as for factories, services and controller functions.

PRV MENU NEXT

Minification Safe Dependency Injection in AngularJS

Latest Post